<template>
  <div>

    <!--滚动栏-->
    <el-carousel class="gun_dong_lan" trigger="click" height="150px">
      <el-carousel-item v-for="item in 4" :key="item">
        <h3 class="small">{{ item }}</h3>
      </el-carousel-item>
    </el-carousel>

    <div v-show="this.isLogin">
      <h1>每日推荐</h1>
      <el-row>
        <el-col :span="5" :offset="1" v-for="item in this.caipuLists">
          <el-card class="mei_ri_tui_jian" style=" margin-top: 8px;">
            <el-image
                style="height: 215px;width: 215px;"
                src="https://i3.meishichina.com/attachment/recipe/2018/04/24/20180424152455550644713.jpg?x-oss-process=style/c320"></el-image>
            <el-link :href="'/detail/'+item.idCookbook">{{ item.cookbookName }}</el-link>
          </el-card>
        </el-col>
        <!--菜谱标签-->
        <el-col :span="5">
          <el-card class="mei_ri_tui_jian" style="margin-left: 50px;margin-top: 8px">
            <el-tag>标签一</el-tag>
            <el-tag type="success">标签二</el-tag>
            <el-tag type="info">标签三</el-tag>
            <el-tag type="warning">标签四</el-tag>
            <el-tag type="danger">标签五</el-tag>
            <div>
              <el-link href="/list" target="_blank">进入菜谱大全></el-link>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>


    <h1>最新菜谱</h1>
    <el-row>
      <el-col :span="3" v-for=" item in caipuLists_new.slice(0, 6)" :offset="1">
        <div class="zui_xin_cai_pu" style=" margin-top: 8px;">
          <el-image
              style="height: 190px;width: 130px;"
              src="https://i3.meishichina.com/attachment/recipe/2018/04/24/20180424152455550644713.jpg?x-oss-process=style/c320"></el-image>
          <div style="text-align: center">
            <el-link :href="'/detail/'+item.idCookbook">{{ item.cookbookName }}</el-link>
          </div>
        </div>
      </el-col>
    </el-row>

    <h1>精选</h1>
    <el-row>
      <el-col :span="7" v-for=" i in caipuLists_better.slice(0, 6)" :offset="1">
        <el-card class="jing_xuan" style=" margin-top: 8px;">
          <el-image
              style="height: 165px;width: 290px;"
              src="https://i3.meishichina.com/attachment/recipe/2018/04/24/20180424152455550644713.jpg?x-oss-process=style/c320"></el-image>
          <el-row>
            <el-col :span="17">
              <strong>
                <el-link :href="'/detail/'+i.idCookbook">{{ i.cookbookName }}</el-link>
              </strong>
              <div>{{i.level}}</div>
            </el-col>
            <el-col :span="7">
              <div><i class="el-icon-view"></i>{{i.views}}</div>
              <div><i class="el-icon-star-on"></i>{{i.favorite}}</div>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "index",
  data: function () {
    return {
      caipuLists: [],
      searchKey: '',
      searchResult: '',
      userid: '',
      isLogin: false,
      // 最新菜谱
      caipuLists_new: [],
      // 精选
      caipuLists_better: []
    }
  },
  mounted() {
    let _this = this;
    _this.listCaipuList();
    _this.login_or_not();
    _this.fun();
  },
  methods: {
    // 获取最新的7条菜谱信息
    async listCaipuList() {
      let _this = this;
      let {data: res} = await _this.$http.get(process.env.VUE_APP_SERVER + '/caipu-list/list-new-7')
      // console.log(res)
      _this.caipuLists = res.data
      // console.log(_this.caipuLists)
    },
    // 根据菜谱名称搜索菜谱
    async searchCookbookByCookName() {
      let _this = this;
      let cookbookName = _this.searchKey
      let {data: res} = await _this.$http.get(
          process.env.VUE_APP_SERVER + '/caipu-list/getCookbookByCookBookName?cookbookName=' + cookbookName
      )

      console.log(res.data)
      _this.searchResult = res.data
      console.log(_this.searchResult)
    },
    async login_or_not() {
      this.userid = SessionStorage.get("SESSION_KEY_LOGIN_MEMBER").userId

      if (this.userid === undefined) {
        this.isLogin = false
      }
      this.isLogin = true
    },
    // 此函数仅仅是为了渲染一些随机数据到【精选栏目】【最新菜谱】上，并非是真的业务数据！
    async fun() {
      let _this = this;
      let {data: res1} = await _this.$http.get(process.env.VUE_APP_SERVER + '/caipu-list/list-new-7')
      // console.log(res)
      _this.caipuLists_new = res1.data
      let {data: res2} = await _this.$http.get(process.env.VUE_APP_SERVER + '/caipu-list/list-new-7')
      // console.log(res)
      _this.caipuLists_better = res2.data
    }
  }
}
</script>

<style scoped>

.jing_xuan {

}

.zui_xin_cai_pu {
  height: 250px;
  width: 150px
}

.mei_ri_tui_jian {
  height: 280px;
  width: 260px
}

.gun_dong_lan {
  height: 230px;
  width: 1100px;
  background-color: #475669;
  /*顺序依次是 上，右，下，左*/
  margin: 20px auto 20px auto;
}

.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 150px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}
</style>